<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>数据库资源与生命周期管理 TeleDB-DCP</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          数据库资源与生命周期管理平台DCP（Database Controller
          Platform）是一款可针对用户数据库资源进行全生命周期进行管控的管理平台，可支持一键开通实例、在线扩/缩容、实时退订实例等特性，且在实例全生命周期内，DCP能够帮助数据库管理员（DBA）和系统管理员可视化监控、便捷操作MySQL、PostgreSQL、TiDB等多种类异构型的数据库环境，且能通过采集数据库性能指标、机器资源占用率、网络I/O等监控数据并结合远程操作/配置数据库实例、自定义告警、SQL审计、网络拓扑、自动巡检等工具来全局掌控服务器、网络、存储资源和应用服务状态，从而来全面释放运维能力。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane
            :label="item.title"
            :name="item.num"
            v-for="(item, index) in tabList"
            :key="index"
          >
            <div class="list-box">
              <div class="title">
                <span>{{ index + 1 }}</span> {{ item.name }}
              </div>
              <div class="mb-20">{{ item.label }}</div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="section-title mt-20">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="framework-img mt-20 bor">
          <img :src="frameworkImg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav16',
  data () {
    return {
      activeName: '0',
      list: [
        {
          name: '实例生命周期管理',
          label: '用户只需选取数据库集群规格、填入数据库密码等重要信息，便可一键高效开通数据库实例。支持在线弹性扩/缩容，解决数据容量膨胀、IOPS瓶颈等问题。用户可根据业务需求,手动释放按量付费实例或者退订包年包月实例。'
        },
        {
          name: '全方位多维度监控',
          label: '实时采集与分析近50项性能指标:以动态模式为数据库运维人员提供全局数据库性能指标与资源状态一览。业务健康度视图以动态扫描的方式清晰的呈现业务的层级结构以及健康度、故障信息，扫描到的业务区域能够提供健康度信息、业务依赖的资源信息以及告警信息。'
        },
        {
          name: '全面的配置管理',
          label: '用户可根据实际的业务应用场景，通过DCP来配置相关的数据库相关配置，使得数据库性能处于最优状态。'
        },
        {
          name: '灵活的告警管理',
          label: '集中展示所有业务系统、设备单元、服务器监控相关的告警信息，当监控指标触发用户设置的告警条件时，支持以邮箱、短信、企业微信、小程序、自研App等多样方式通知用户，让用户在第一时间得知云服务发生异常，迅速处理故障，避免因资源问题造成业务损失。\n' +
            '日志管理： DCP平台集成了慢日志、错误日志、审计日志、操作记录等多项日志管理，方便用户在控制台上进行全方位的日志管理。'
        }
        // { name: '跨平台和丰富的数据源支持', label: '平台可以运行在Linux、Windows 等各种操作系统；支持Oracle、MySQL、PostgreSQL、TiDB等各种数据源。' }
      ],
      tabList: [
        {
          title: '场景1',
          num: '0',
          name: '传统行业IT系统上云',
          label: '解决传统IT上云中部署过程复杂，操作系统依赖性高，部署成本大，系统运行效率低，运维流程繁琐等难题。'
        },
        {
          title: '场景2',
          num: '1',
          name: '数字化智能运维场景',
          label: '减少基础设施运维操作，统一运维平台集成数据中心服务数据，如数据库性能数据、服务器资源使用数据、监控告警数据、自动化操作数据、审计日志数据等，通过数据挖掘不断持续改善服务质量和运营水平。'
        },
        {
          title: '场景3',
          num: '2',
          name: 'PaaS+SaaS的运维模式',
          label: '基于“厚平台、薄应用的”架构形态，支持多租户部署、隔离、管理，提高系统安全性，打造承载各类场景SaaS工具的统一运维PaaS平台，为企业数据库运维的管控提供统一入口，扩展平台层的灵活性。'
        },
        {
          title: '场景4',
          num: '3',
          name: '多维度自动化工具运维场景',
          label: '面向数据中心运维角色需求，打造针对各种IT技术对象的运维管理场景的自动化工具（扩/缩容，密码管理，数据闪回，配置管理，角色权限管理）。'
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-16.png')
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.list-box {
}
</style>
